<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFangSC-Regular, PingFang SC;
		background-color: #f5f5f5;
		font-size: 13px;
	}
	
	.app{
		max-width: 640px; margin: 0 auto; 
		.panel{
			background-color: #ffffff;
			box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
			padding: 8px;
			margin: 8px;
			border-radius: 8px;
		}
	}
	.btn-save{
		margin: 16px 0 0;
		button{
			height: 35px;line-height: 35px; border: none; background-color: #38987c; color: #fff; border-radius: 6px;font-size: 13px;
		}
	}
		
	.flex {
		display: flex
	}
	.flex-col {
		display: flex;
		flex-direction: column
	}
	.flex-wrap {
		flex-wrap: wrap
	}
	.items-end {
		align-items: flex-end
	}
	.items-center {
		align-items: center;
	}
	.items-start{
		align-items: flex-start;
	}
	.justify-start{
		justify-content: flex-start;
	}
	.justify-center {
		justify-content: center
	}
	.justify-between {
		justify-content: space-between;
	}
	.justify-end{
		justify-content:end;
	}
	.justify-self-end {
		justify-self: end;
	}
	.dd-flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shadow {
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
	}
	
	
	.table{
		display: table;
		width: 100%;
		border-collapse:collapse;table-layout:fixed;
	
		.row{
			display: table-row;
			border-bottom: #dddddd 1px solid;
			
			.cell{
				display: table-cell; 
				text-align: center;
				vertical-align: middle;
				padding: 8px 0;
			}
			.cell>text{
				display: block;
			}
			.cell>text:nth-child(1){
				padding-bottom: 4px;
				border-bottom: 1px solid #f0f0f0;
			}
			.cell>text:nth-child(2){
				padding-top: 4px;
			}
			
			// .cell:nth-child(1),.cell:nth-child(3){
			// 	width: 40px;
			// 	/* max-width:100px; */overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 
			// }
			.cell:nth-last-child{
				text-align: right;
			}
		}
		.body{
			.cell{
				font-size: 12px;
			}
		}
		.header{
			background-color: #f0f0f0;
		}
		.total{
			color: #ff5500;
		}
		.status_0,.status2_0{
			color: #38987c;
		}
		.status_1,.status2_1{
			color: #ff0000;
		}
	
	}
	
	.playctr{
		position: fixed; z-index: 99;left: 0; bottom: 0; width: 100vw; border-top:#e6e6e6 1px solid; background-color: #fff;  padding: 8px 0;
	}
	.playctr-item{
		margin: 8px auto; width: 95vw;
	}
	.ptime{
		font-size: 12px;
	}
	.ptime text{
		color: #999;
	}
	
	.status{
		margin-left: 5px;
		padding: 2px 5px;
		display: block;
		background: #2d8cf0;
		color: #fff;
		border-radius: 3px;
		border:1px solid;
		font-size: 12px;
	}
	.status1{
		background: #fff7e6;
		border-color: #ffd591;
		color: #fa8c16;
	}
	.status2{
		background: #f0f5ff;
		border-color: #adc6ff;
		color: #2f54eb;
	}
	.status3{
		background: #e6f7ff;
		border-color: #91d5ff;
		color: #1890ff;
	}
	.status8{
		background: #2d8cf0;
	}
	.status9{
		background: #fff0f6;
		border-color: #ffadd2;
		color: #eb2f96;
	}
	.status6{
		border-color:  #e8eaec;
		background: #f7f7f7;
		color: #515a6e;
	}
	.status7{
		background: #ed4014;
	}
	.status4{
		background: #19be6b;
	}
	.status5{
		background: #f9f0ff;
		border-color: #d3adf7;
		color: #722ed1;
	}
	.nodata{
		position: absolute;
		left: 50%;
		top: 120px;
		transform: translateX(-50%);
	}
	/*每个页面公共css */
</style>
